<%inherit file="base.html"/>
<%block name="content">
    <link href="${STATIC_URL}opsplatform/css/dataTables.bootstrap.css" rel="stylesheet"/>
    <link href="${STATIC_URL}opsplatform/css/bk.css?v=1.0.1" rel="stylesheet">
    <script src="${STATIC_URL}opsplatform/js/jquery-1.10.2.min.js"></script>
    <script src="${STATIC_URL}opsplatform/js/layer.js"></script>
    <script src="${STATIC_URL}opsplatform/js/jquery.dataTables.js"></script>
    <script src="${STATIC_URL}opsplatform/js/dataTables.bootstrap.js"></script>

    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-lg-8">
            <h2>资产管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a href="${SITE_URL}">Home</a>
                </li>

                <li class="active">
                    <strong>服务器列表</strong>
                </li>
            </ol>
        </div>

    </div>
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">

                        <div id="ct-chart1" class="ct-perfect-fourth"></div>
                                    <div class="panel-content">
                                        <table id="table2_demo2" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th style="width: 12px">
                                                        <input type="checkbox" name="checkall" value="">
                                                    </th>
                                                     <th>Id</th>
                                                   <th>主机名</th>
                                                   <th>内网IP</th>
                                                   <th>外网IP</th>
                                                   <th>总内存</th>
                                                   <th>CPU类型</th>
                                                   <th>CPU颗数</th>
                                                   <th>系统版本</th>
                                                   <th>内核版本</th>
                                                   <th>操作</th>
                                                </tr>
                                            </thead>
                                             <tbody>
                                             % for dd in data:
                                                        <tr>
                                                            <td>
                                                                <input  class="checkbox_id" type="checkbox" name="abc" value="${dd['hostname']}">
                                                            </td>
                                                            <td>${dd['id']}</td>
                                                            <td>${dd['hostname']}</td>
                                                            <td>${dd['private_ip']}</td>
                                                            <td>${dd['public_ip']}</td>
                                                            <td>${dd['mem_total']} M</td>
                                                            <td>${dd['cpu_type']}</td>
                                                            <td>${dd['num_cpus']}</td>
                                                            <td>${dd['os_release']}</td>
                                                            <td>${dd['kernelrelease']}</td>
                                                            <td>
                                                                <input type="button" class="btn btn-xs btn-info"  check_id="${dd['id']}" name="${dd['hostname']}" value="详情" onclick="get_hostdetail(this)">
                                                                <input type="button" class="btn btn-xs btn-danger" check_id="${dd['id']}" name="${dd['hostname']}" value="删除" onclick="del_raw(this)">
                                                                <input type="button" class="btn btn-xs btn-primary" check_id="${dd['id']}" name="${dd['hostname']}" value="cmd执行" onclick="salt_cmd(this)">
                                                            </td>
                                                        </tr>
                                                    % endfor
                                                </tbody>
                                                <tfoot >
                                            <tr>
                                            <td colspan="11">
                                                <div class="pull-left">
                                                    <a class="king-btn king-radius king-danger ml10" id="deleteAll" title="删除">批量删除</a>
                                                    <a class="king-btn king-radius king-success ml10" onclick="refresh()" title="刷新">刷新</a>

                                                </div>
                                            </td>
                                        </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                   </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // 全局

        // 对于多选或者单选的做出判断
            $('#table2_demo2').find('input[name="checkall"]').click(function(){
                    var checked = $(this).prop('checked');

                    $('#table2_demo2>tbody input').prop('checked', checked);
                });
            $('#table2_demo2').find(':checkbox').on('click', function(){
                if(!this.checked){
                    $('#table_demo2').find('input[name="checkall"]').prop('checked',false);
                }
            });

        //操作选项里面的"删除"功能
        function del_raw(_this) {
                var hostname = $(_this).attr("name");
                var check_id = $(_this).attr("check_id");
                // alert(check_id)
                swal({
                  title: "您确定要删除主机?\n" + hostname,
                  text: "删除后将无法恢复，请谨慎操作！",
                  type: "warning",
                  showCancelButton: true,
                  showLoaderOnConfirm: true,
                  confirmButtonColor: "#DD6B55",
                  confirmButtonText: "是的，删除它",
                  cancelButtonText: "我在想想吧...",
                  closeOnConfirm: false,
                  closeOnCancel: true  //关闭取消后还弹出让你确认的效果提示
                },
                  function(isConfirm){
                  if (isConfirm) {    // 如果确认就会去携带者hostname去后台处理
                    $.ajax ({
                            type:'post',
                            url:"${SITE_URL}delete_server/?host="+hostname,
                            success:function(res){   //将处理的结果进行判断，根据执行失败，成功现实的提示不同的内容
                                if (res.result) {
                                    swal(res.message, "Your imaginary file has been deleted.", "success");
                                    //$("input[check_id="+check_id+"]").parents("tr").remove(); //获取要删除的那行节点
                                    $(_this).parents("tr").remove();
                                    window.location.reload()
                                }
                                else {
                                    swal(res.message, "Your imaginary file is safe :)", "error");
                                }
                            }
                        });
                     }
                });
            }
            //多项删除
            $('#deleteAll').click(function() {
                var records = $('#table2_demo2>tbody input:checked').closest('tr');
                //判断用户是否选择
                if (!records.length){
                    swal('', "请选择你要删除的选项 :)", "error");
                    return false;
                }
                //全选或者部分选择
                var host_array=new Array();
                    $("input[name='abc']:checked").each(function () {
                    host_array.push($(this).val());
                    var idstr=host_array.join(',');

                  swal({
                  title: "您确定要删除所选主机?\n"  //+ idstr.replace('\\u','') ,
                  text: "删除后将无法恢复，请谨慎操作！",
                  type: "warning",
                  showCancelButton: true,
                  showLoaderOnConfirm: true,
                  confirmButtonColor: "#DD6B55",
                  confirmButtonText: "是的，删除它",
                  cancelButtonText: "我再想想吧...",
                  closeOnConfirm: false,
                  closeOnCancel: true  //关闭取消后还弹出让你确认的效果提示
                },
                  function(isConfirm){
                  if (isConfirm) {    // 如果确认就会去携带者hostname去后台处理

                   $.ajax ({
                            type:'post',
                            url:"${SITE_URL}delete_server/?host="+idstr,
                            success:function(res){   //将处理的结果进行判断，根据执行失败，成功现实的提示不同的内容
                                if (res.result) {
                                    swal(res.message, "", "success");
                                    records.remove();  // 删除前端
                                }
                                else {
                                    swal(res.message, "", "error");
                                }
                            }
                        });
                  }
                });
             });

            });



      function refresh() {
            swal({
              title: "刷新主机列表？",
              type: "info",
              showCancelButton: true,
              closeOnConfirm: false,
              showLoaderOnConfirm: true
            },
             function(isConfirm){
              if (isConfirm) {    //
                $.ajax ({
                        type:'POST',
                        url:"${SITE_URL}get_server_info/",
                        success:function(res){   //将处理的结果进行判断，根据执行失败，成功现实的提示不同的内容
                            if (res.result) {
                                swal(res.message, "^0^", "success");
                                window.location.reload();
                            }
                            else {
                                swal(res.message, "", "error");
                                //window.location.reload();
                            }
                        }
                    });
              }
            });
        }
    </script>


<!-- 表格分页功能 -->
<script type="text/javascript">
  $(function () {
    var language = {
      search: '搜索：',
      lengthMenu: "每页显示 _MENU_ 记录",
      zeroRecords: "没找到相应的数据！",
      info: "分页 _PAGE_ / _PAGES_",
      infoEmpty: "暂无数据！",
      infoFiltered: "(从 _MAX_ 条数据中搜索)",
      paginate: {
        first: '首页',
        last: '尾页',
        previous: '上一页',
        next: '下一页'
      }
    };
    $('#table2_demo2').dataTable({
      paging: true, //隐藏分页
      ordering: true, //关闭排序
      info: false, //隐藏左下角分页信息
      searching: true, //关闭搜索
      pageLength : 10, //每页显示几条数据
      lengthChange: true, //不允许用户改变表格每页显示的记录数
      language: language, //汉化
      columnDefs: [  // 这是第一列不进行排序
        { "orderable": false, "targets": 0 }
      ]
    } );
  });
</script>

<!--  获取主机详情 -->
<script>
  function get_hostdetail(_this) {
        var hostname = $(_this).attr("name");
        layer.open({
        type: 2,
        area: ['1100px', '700px'],
        fixed: true, //不固/
        closeBtn: 0,
        shadeClose: true,
        maxmin: true,
        skin: 'layui-layer-rim',
        content: '../display_hostdetail/?host=' + hostname
        });
  }
</script>

<script>
  function salt_cmd(_this) {
      var key_name = $(_this).attr("name");
        layer.open({
        type: 2,
        area: ['1100px', '700px'],
        fixed: true, //不固/
        closeBtn: 0,
        shadeClose: true,
        maxmin: true,
        skin: 'layui-layer-rim',
        content: '../salt_cmd/?hostname=' + key_name
        });
  }
</script>



</%block>